<!-- 购物车页面 -->
<template>
  <!-- 顶部导航区域 -->
  <van-nav-bar
    title="购物车"
    left-arrow
    @click-left="onClickLeft"
  />

  <!-- 购物车列表 -->
  <div class="cart_list" v-if="!isEmpty">
    <!-- 商品列表组件 -->
    <cart-item
      v-for="cart in cartList"
      :key="cart.id"
      :cart="cart"
    />
  </div>

  <!-- 购物车为空时展示的状态 -->
  <van-empty v-else description="当前购物车为空" image-size="220px" />

  <!-- 订单总计区域 -->
  <van-submit-bar
    :price="totalPrice"
    button-text="去结算"
    @submit="handleSubmit"
  >
    <van-checkbox v-model="checkedAll" checked-color="#ee0a24">
      全选
    </van-checkbox>
  </van-submit-bar>

  <!-- 底部导航区域 -->
  <layout-footer />
</template>

<script setup>
// -------------------------------- 导入模块 ---------------------------------
// 导入 vue3 的 API
import { computed, nextTick } from 'vue'
// 导入 vue-router 的 API
import { useRouter } from 'vue-router'

// 导入状态管理
import { useCartStore } from '@/store_pinia' // 商品状态管理

// 导入全局底部导航组件
import LayoutFooter from '@/components/LayoutFooter.vue'
// 导入商品列表组件
import CartItem from './components/CartItem.vue'

// 导入 vant 组件，按需引入
import {
  NavBar as VanNavBar,
  Empty as VanEmpty,
  SubmitBar as VanSubmitBar,
  Checkbox as VanCheckbox
} from 'vant'

// 导入购物车请求接口
// 1、getCartList：获取商品列表
import { getCartList } from '@/api/cart_api'

// 导入自己封装的功能函数
import judgeRequest from '@/utils/judge_request' // 判断请求状态

// -------------------------------- 声明数据 ---------------------------------
const router = useRouter() // 初始化路由实例
const cartStore = useCartStore() // 实例化容器
const cartList = computed(() => cartStore.cartList) // 存储商品列表数据
const isEmpty = computed(() => cartList.value.length === 0) // 检查当前购物车是否为空
const totalPrice = computed(() => cartStore.totalPrice * 100)// 商品总计
// 全选按钮状态
const checkedAll = computed({
  get: () => cartStore.checkedAll,
  set: newStatus => {
    // 点击全选，操作商品的选中状态
    cartStore.changeAll(newStatus)
  }
})

// -------------------------------- 函数封装 ---------------------------------
// 返回上一层路由按钮
const onClickLeft = () => router.back()

// 获取购物车列表
const initCartList = async () => {
  const data = await getCartList() // 发送请求
  const result = judgeRequest(data.status, '获取购物车列表失败！') // 判断请求结果

  // 如果请求成功
  if (result) {
    // 请求新数据前，将原始数据清空
    cartStore.clearCart()

    // 防止页面渲染顺序问题，保证数据先清空再进行获取数据
    await nextTick()

    // 因为请求到的数据有很多无用的，需要进筛选再存入到状态管理中
    data.data.valid.forEach(item => {
      // 使用状态管理添加数据
      // 数据应该包含：id、checked、count、image、title、price、stock、productId
      cartStore.addToCart({
        id: item.id,
        checked: true,
        count: item.cart_num,
        image: item.productInfo.image,
        title: item.productInfo.store_name,
        price: item.truePrice,
        stock: item.trueStock,
        productId: item.product_id
      })
    })
  }
}

// 去结算按钮事件
const handleSubmit = () => {
  // 跳转到订单页
  router.push({
    name: 'order-confirm',
    params: {
      // cartId 是所有要结算的商品的规格 id 的结合
      cartId: cartStore.checkedItems.map(item => item.id).toString()
    }
  })
}

// -------------------------------- 函数调用 ---------------------------------
initCartList() // 调用获取购物车列表函数
</script>

<style lang="scss" scoped>
// 头部导航区域
.van-nav-bar {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 1;
}

// 商品列表区域
.cart_list {
  margin: 50px 0 100px;
  background-color: #F2F2F2;
}

.van-empty {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

// 总计区域
.van-submit-bar {
  bottom: 50px;
}
</style>
